<template>
    <div class="main mainPadding p-t" style="background: #fff;">
        <div class="max-w">
      <listView :breadcrumb_list="breadcrumb_list" :page ="page" @currentChange="currentChange">
        <template v-slot:topR>
            <el-breadcrumb separator="|">
                <el-breadcrumb-item v-for="(item,i) in breadcrumb_list1" :key="i" v-show="item.isNav==1" @click="getUlist(item,i)">
                <span :style="index==i?'color:red;':''" class="cursor-p">{{ item.name }}</span></el-breadcrumb-item>
            </el-breadcrumb>
        </template>
        <template v-slot:content>
            <div class="MarT35">
            <el-row :gutter="20" style="min-height:350px;">
                <el-col :span="24">
                    <div v-if="lists.length==0">
                        <el-empty :image-size="150" description="暂无数据"  />
                    </div>
                    <el-row :gutter="20">
                        <el-col v-for="item in lists" :key="item" :span="6" style="padding-top: 20px;" @click="detail(item)">
                            <div style="height: 180px;">
                                <imgView :src="item.thumb"/>
                            </div>
                            <div class="item " style="height: 80px;">
                                <div class="title-16-left omit MarT12">{{ item.name }}</div>
                                <div class="font-content-14 omit-2 MarT12">{{ item.blurb }}</div>
                            </div>
                        </el-col>
                    </el-row>
                    
                </el-col>
            </el-row>
            <div class="pager" v-if="isPage">
                <myPage @nextbtn="nextbtn" @prevbtn="prevbtn" />
            </div>
            </div>
        </template>
      </listView>
        </div>
    </div>
  </template>
  
  <script setup>
  import { ref,reactive, onMounted,getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  import CryptoJS from 'crypto-js';
  import listView from '../components/list.vue';
  import { useRouter } from "vue-router";
  const Router = useRouter();
  import Card1 from '../components/card1.vue';
      // 面包屑
      const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob)
      const breadcrumb_list = ref([{name:query.firstTitle||'--'},{name:query.title}])
      const breadcrumb_list1 = query.titleList
      const index = ref(query.i)
    //获取列表
    const lists = ref([])
    const pageinfo = ref({
        nextTag:0,
        prevTag:0
    })
    const isPage = ref(true)
    const getList=(id)=>{
        proxy.$comJs.getNewList(10,id,{...pageinfo.value},'',(data)=>{
            data.list.map((item)=>{
                lists.value.push(item)
            })
            pageinfo.value={
                nextTag:data.nextTag,
                prevTag:data.prevTag
            }
            if(data.nextTag < 0||data.nextTag==0){
                isPage.value = false
            }
        })
    }
    getList(query.titleList[index.value].id)
    const nextbtn=()=>{
        getList(query.titleList[index.value].id)
        
    }
    const prevbtn=()=>{
        getList(query.titleList[index.value].id)
    }
    const getUlist=(item,i)=>{
        pageinfo.value = {
            nextTag:0,
            prevTag:0
        }
        isPage.value = true
        lists.value = []
        getList(item.id)
        index.value = i
        breadcrumb_list.value = [{name:query.firstTitle||'--'},{name:item.name}]
    }
    // 创新声音、地方观察
    const page = ref({
        total:10
    })
    const currentChange = (e)=>{
        ElMessage('第'+e+'条')
    }
      
      const detail = (item)=>{
        const routeUrl = Router.resolve({
            path:'/animatedly/info',
            query:{
                ob:proxy.$comJs.encry({
                    title:breadcrumb_list.value[1].name,
                    id:item.newsId,
                    path:'/animatedly/list',
                    first_title:query.firstTitle||'--',
                    first_path:-1
                })
            }
        });
        window.open(routeUrl.href, "_blank");
      }
      
  </script>
  
  <style lang='less' scoped>
  .item{
    height: 228px;
    
    .title{
        font-size: 26px;
        text-align: left;
        font-weight: bold;
    }
    .desc{
        font-size: 13px;
        color: #8d8d8d;
        text-align: left;
        line-height: 23px;
        margin-top:22px ;
    }
    .time{
        font-size: 10px;
        color: #8d8d8d;
        text-align: right;
        margin-top:18px ;
    }
  }
  .cxview{
    font-size: 14px;
    margin-top: 28px;
    text-align: left;
  }
  .pager{
        display: flex;
        justify-content: center;
        padding: 34px 0;
      }
  </style>
  
